


<template>
	<div class="ask-wp" :style=askWpStyle>
		<div class="answer-time">{{ansTime}}</div>
		<div class="info-img">
			<img :src=bannerImgUrl>
		</div>
		<div class="ask-title">{{answerNum}}.{{renderAskObj.title}}</div>
		<ul class="opt-wp">
			<li 
				class="evy-opt" 
				v-for="(item,index) in renderAskObj.opts"
				@click="onSelOpt(renderAskObj,index)"
				:class="{'on':theRightIndex===index,'err-cls':currIndex===index&&theRightIndex!=index}"
			>
				{{item}}
			</li>
		</ul>
	</div>
</template>
<script>	
	// import picArr from '../assets/js/data'
	export default {
		name:'Question',
		data() {
			return {
				ansTime:'01:00',
				questions:[
						{
							typeId:100,
							typeName:'传统文化',
							selected:0,//标识该类型被选择的次数
							askArr:[
								{
									title:'“言必信，行必果”是哪位思想家的名言?(  )',
									rightIndex:0,
									opts:['A.孔子', 'B.孟子', 'C.老子', 'D.韩非子'],
								},
								{
									title:'“慎独”是我国哪一个学派最早提出的一种道德修养方法?(  )',
									rightIndex:0,
									opts:['A.儒家',' B.道家', 'C.法家',' D.释家'],
								},
								{
									title:'“君子敬以直内，义以方外”出自我国古代哪部书？( )',
									rightIndex:3,
									opts:['A.大学' , 'B.诗经', 'C.论语', 'D.周易'],
								},
								{
									title:'“君子之言，信而有证。君子养心，莫善于诚。”这句话是我国古代哪位哲学家的名言？(  )',
									rightIndex:2,
									opts:['A.孔子','B.庄子','C.荀子','D.墨子'],
								},
								{
									title:'“巧诈不如拙诚”是我国古代哪位哲学家的名言？(  )',
									rightIndex:3,
									opts:['A.孔子','B.孟子','C.荀子 ','D.韩非子'],
								},
								{
									title:'“心如规矩，志如尺衡，平静如水，正值如绳。”这句话是我国汉代哪位哲学家的名言？( )',
									rightIndex:2,
									opts:['A.王充','B.董仲舒',' C.严遵',' D.晁错'],
								},
								{
									title:'“古之所谓正心而诚意者，将以有为之。”这句话出自哪篇文章，作者是谁？( )',
									rightIndex:0,
									opts:['A.韩愈《原道》','B.柳宗元《永州八记》',' C.欧阳修《醉翁亭记》','D.曾巩《上蔡学士书》'],
								},
								{
									title:'“诚能体而存之，则众善之源，百行之本。”这句话选自宋代朱熹的哪篇文章？(  )',
									rightIndex:3,
									opts:['A.《四书集注 孟子集注》','B.《宋名臣言行录》','C.《朱子语类 易九》 ','D.《仁说》'],
								},
								{
									title:'“君子戒自欺，求自谦。”是明代哪位清官的名言？(  )',
									rightIndex:0,
									opts:['A.海瑞','B.狄仁杰 ','C.包拯','D.于成龙'],
								},
								{
									title:'下列哪个与诚信有关的历史故事反映了失信的严重后果？(  )',
									rightIndex:0,
									opts:['A.烽火戏诸侯','B.商鞅立木 ','C.曾子杀猪','D.季布一诺'],
								}
								
							]

						},
						{
							typeId:101,
							typeName:'信用历史',
							selected:0,//标识该类型被选择的次数
							askArr:[
								{
									title:'1942年，毛泽东同志为中央党校题词内容是（）',
									rightIndex:1,
									opts:['A.爱国守法','B.实事求是','C.敬业奉献','D.明礼诚信'],
								},
								{
									title:'“丈夫一言许人，千金不易”出自宋朝司马光编著的（）一书',
									rightIndex:1,
									opts:['A.大学','B.资治通鉴','C.汉史','D.史记'],
								},
								{
									title:'以下哪些典故反映了诚信的重要性？（）',
									rightIndex:3,
									opts:['A.蔺相如完璧归赵','B.晋文公退避三舍','C.穆伯“宁取诚信不取城”','D.以上都是'],
								},
								{
									title:'最早的信用关系——（）意味着对受信人的未来付款的信任',
									rightIndex:0,
									opts:['A.赊销','B.诚信','C.信用','D.贷款'],
								},
								{
									title:'全国质量月是每年的（）月',
									rightIndex:1,
									opts:['A.8','B.9','C.10','D.11'],
								},
								{
									title:'“双公示”工作指的是（）和（）等信用信息公示工作',
									rightIndex:0,
									opts:['A.行政许可，行政处罚','B.行政通知，行政处罚','C.行政许可，行政通知','D.行政制度，行政通知'],
								},
								{
									title:'中国最早的专职征信机构――（ ）创办于 1932 年 6月 6 日，后于 1949 年 5 月解散',
									rightIndex:1,
									opts:['A、中国征信所 ','B、 中华征信所 ','C、人民征信所','D、国家征信所'],
								},
								{
									title:'国务院赋予（ ）管理征信业，推动建立社会信用体系的职责',
									rightIndex:0,
									opts:['A.中国人民银行','B.国家发改委','C.财政部','D.工商局'],
								},
								{
									title:'“诚者,天之道也；思诚者,人之道也。”出自（  ）',
									rightIndex:1,
									opts:['A.《墨子》',' B.《孟子•离娄上》',' C.《荀子》','D.《论语》'],
								},
								{
									title:'“学者不可以不诚。” 出自（ ）',
									rightIndex:2,
									opts:['A.《墨子》','B.《朱子语类》',' C.《河南程氏遗书》','D.《孟子》'],
								}
								
							]

						},
						{
							typeId:102,
							typeName:'信用卡部分',
							selected:0,//标识该类型被选择的次数
							askArr:[
								{
									title:'信用卡产品在银行业务中的类属  (    )。',
									rightIndex:0,
									opts:['A.个人信贷业务','B.借记卡业务','C.对公贷款业务','D.负债类业务'],
								},
								{
									title:'对消费类交易，从银行记账日至最后还款日之间的免息还款期为多少天？(   )',
									rightIndex:3,
									opts:['A.21天--51天','B.20天--50天','C.15天--45天','D.20天--51天'],
								},
								{
									title:'当持卡人出国旅游或乔迁新居时，在一定时间内需要较高额度，可要求调高（）。',
									rightIndex:2,
									opts:['A.信用额度','B.永久信用额度','C.临时信用额度','D.总信用额度'],
								},
								{
									title:'信用卡客户在最后还款日之前至少需要还够（  ）才能保持良好的信用记录。',
									rightIndex:2,
									opts:['A.账户中的全部欠款','B.帐单的全部金额',' C.最低还款额','D.欠款的50%以上'],
								},
								{
									title:'除美国、中国外，目前还有（）拥有一个国际化的银行卡品牌。',
									rightIndex:3,
									opts:['A.法国','B.新加坡','C.俄罗斯','D.日本'],
								},
								{
									title:'下面不是信用卡行业协会的是（  ）',
									rightIndex:3,
									opts:['A.VISA','B.JCB','C.MASTERCARD','D.CAPITAL ONE'],
								},
								{
									title:'发行国内第一张信用卡的是（ ）。',
									rightIndex:0,
									opts:['A.中国银行','B.工商银行','C.建设银行','D.广东发展银行'],
								},
								{
									title:'持卡人需要使用（）激活本人的信用卡。',
									rightIndex:3,
									opts:['A.单位电话','B.本人的任意手机',' C.本人的任意固定电话','D.申请表上预留的手机或家庭电话'],
								},
								{
									title:'主卡和附属卡的额度是什么关系（）。',
									rightIndex:2,
									opts:['A.主卡和附属卡额度独立',' B.主卡和附属卡额度共享',' C.主卡和附属卡额度可以独立也可以共享',' D.各种产品情况不同'],
								},
								{
									title:'标准双币贷记卡在境外使用时以（ ）为结算币种。',
									rightIndex:1,
									opts:['A.人民币',' B.美元 ','C.欧元',' D.人民币和美元'],
								}
								
							]

						},
						{
							typeId:103,
							typeName:'信用常识部分',
							selected:0,//标识该类型被选择的次数
							askArr:[
								{
									title:'我国负责信贷征信管理的部门是哪个？（  ）',
									rightIndex:0,
									opts:['A．中国人民银行','B．国家商务部 ','C．中国银监会','D. 中国证监会'],
								},
								{
									title:'信用评估是对企业的偿债能力、履约状况、（）的评价。',
									rightIndex:0,
									opts:['A. 守信程度','B. 社会责任','C. 创新能力','D. 经营能力'],
								},
								{
									title:'信用报告被人们喻为（）。',
									rightIndex:1,
									opts:['A. 经济快车','B. 经济身份证','C. 经济名牌 ','D. 名牌产品'],
								},
								{
									title:'金融机构在受理您的信贷申请后是否查询您的信用报告（）',
									rightIndex:0,
									opts:['A．一定会',' B．不会 ','C．有时会','D. 国家不允许金融机构查询个人的信用报告'],
								},
								{
									title:'（）是指个人有权知道征信机构掌握的关于自己的所有信息，并到征信机构去查询自己的信用报告。',
									rightIndex:1,
									opts:['A．知情权','B．异议权','C．纠错权 ','D. 反驳权'],
								},
								{
									title:'下面哪项不属于信用交易行为？（）',
									rightIndex:1,
									opts:['A．银行向您发放贷款','B．缴交水电费','C．向朋友借钱','D. 分期付款购买车辆'],
								},
								{
									title:'信用评级的运作原则是：独立、公正、（　　）和科学 ',
									rightIndex:0,
									opts:['A．客观','B．严格','C．互惠','D. 公开'],
								},
								{
									title:'诚信原则是（      ）的一项基本原则，也是整个民事活动的基本原则',
									rightIndex:0,
									opts:['A．合同法','B．经济合同法','C．经济法','D. 债权法'],
								},
								{
									title:'无论何时，诚信都是我们赢得友谊的前提，（）的人到哪里都会得到朋友的帮助',
									rightIndex:2,
									opts:['A.讲道德','B.讲原则','C.讲诚信','D.讲公平'],
								},
								{
									title:'久而久之，（）的行为受到惩罚，人们会恪守诚信，社会会诚信之风自然会慢慢形成',
									rightIndex:2,
									opts:['A.不文明','B.不道德','C.不诚信','D.不公平'],
								},
								{
									title:'（）的造假、欺诈等行为严重影响了我国市场经济秩序',
									rightIndex:1,
									opts:['A.教育行业','B.财经行业','C.科技行业','D.文化行业'],
								},
								{
									title:'所谓（），就是使自己受尊敬的心理和行为',
									rightIndex:1,
									opts:['A.自强','B.自尊','C.自信','D.自立'],
								},
								{
									title:'司法核心价值观的内容包括“（），廉洁，为民”',
									rightIndex:0,
									opts:['A.公正','B.公平','C.平等','D.客观'],
								},
								{
									title:'以下哪些属于守信的表现？ （）',
									rightIndex:3,
									opts:['A.讲诚信','B.遵守法律法规','C.履行合同','D.以上都是'],
								},
								{
									title:'诚信作为一种道德规范，自古强调自觉，即所谓（）',
									rightIndex:2,
									opts:['A.自谦','B.自律','C.慎独','D.自立'],
								},
								{
									title:'我国传统社会中的诚信主要是（），而在现代市场经济条件下，诚信主要以理性做基础',
									rightIndex:2,
									opts:['A.理性诚信','B.组织诚信','C.情感诚信','D.制度诚信'],
								},
								{
									title:'加强（）的诚信教育是推进政府诚信建设的基础环节',
									rightIndex:0,
									opts:['A.公务员','B.干部','C.公民','D.领导'],
								},
								{
									title:'全社会的诚信状况与个人的（）养成息息相关',
									rightIndex:0,
									opts:['A.诚信品质','B.守法意识','C.爱国情怀','D.友善待人'],
								},
								{
									title:'以下属于“炒信”行为的有（）',
									rightIndex:3,
									opts:['A.恶意注册','B.虚假评价','C.刷单骗补','D.以上都是'],
								},
								{
									title:'人们习惯于“办事找熟人、找关系”，体现了传统诚信观的哪项特点？',
									rightIndex:0,
									opts:['A.建立在亲疏关系之上','B.建立在法律规定之上','C.建立在自律自觉之上','D.建立在个人修养之上'],
								}
								
							]

						}
			    ],
			    banPicArr:[
			    	require('../assets/img/ban-pic1.png'),
			    	require('../assets/img/ban-pic2.jpg'),
			    	require('../assets/img/ban-pic3.jpg'),
			    	require('../assets/img/ban-pic4.jpg'),
			    	require('../assets/img/ban-pic5.jpg')
			    ],
			   	renderAskObj:{},
			    answerNum : 1,
			    rightNum : 0,
			    currIndex: -1,//选中索引
			    isFirst:true,
			    evyTypeMustDel:false,
			    hasClked:false,
			    timer:0,
			    askWpStyle:{'height':'100%'},
			    theRightIndex:-1,//正确答案的索引
			    typeId:-1
			}
		},
		computed:{
			currArr() {
				let vm = this;
				let curr_arr = [];
				
				
				vm.questions.map((item,index,arr) => {
					if( vm.hasDelted ) {
						if(item.selected<2) {
							curr_arr.push(item);
						}
					}else {
						curr_arr.push(item);
					}
				});
				
				return curr_arr;
			},
			hasDelted() {
				let vm = this;
				let bl = false;
				let threeCounts = 0;

				vm.questions.map( (item,index,arr)=> {
					
					if(item.selected === 3) {
						threeCounts += 1;
					}

					if(threeCounts === 2 || item.selected>=4) {
						bl = true;
					}

				} )

				return bl;
			},
			bannerImgUrl() {
				var vm = this;
				var index = (vm.answerNum - 1)%5;
				return vm.banPicArr[index];
			}
		},
		methods:{
			timeDown() {
				let vm = this;
				let t = 59;
				clearInterval(vm.timer);
				vm.timer = setInterval(function() {
					if(t>-1) {
						if(t<10) {
							t = '0' + t ;
						}
						vm.ansTime = '00:'+t;
						t--;
					}else {
						clearInterval(vm.timer);
						if(vm.answerNum>=10) {

							vm.$router.replace({
								name:'Result',
								params:{
									correctNum:vm.rightNum
								}
							})
						}else {
							vm.onSelOpt(vm.renderAskObj,-1);
							// vm.timeDown();
						}
					}
				},1000)
			},	
			randomAsk(obj){
				let vm = this;
				let len = ( obj.askArr||[] ).length;
				let currNum = parseInt( len*Math.random() );
				if(len==0) {
					return;
				}
				vm.currIndex = -1;
				vm.theRightIndex = -1;
				vm.renderAskObj = obj.askArr[currNum];
				vm.questions.map(function(item, index) {
					if(item.typeId===obj.typeId) {
						item.askArr.splice(currNum,1);//删除当前这道题，以免重复出现
					}
				})
				// obj.askArr.splice(currNum,1);
				// console.log(vm.bannerImgUrl)
			},
			selType() {
				let vm = this;
				let len = vm.currArr.length;//vm.questions.length;
				let currNum = parseInt( len*( Math.random()) );
				let selectedObj = vm.currArr[currNum] ;
				vm.randomAsk(vm.cloneObj(selectedObj) );
				vm.typeId = selectedObj.typeId;
				vm.questions.map((item,index,arr)=>{
					if(selectedObj.typeId===item.typeId) {
						item.selected = 1 + Number(item.selected); //此时hasDelted重新计算
					}
				})
			},
			onSelOpt(obj,index) {
				let vm = this;
				if(vm.hasClked) return;
				vm.hasClked = true;
				vm.currIndex = index;
				vm.theRightIndex = obj.rightIndex;
				if(obj.rightIndex===index) {
					vm.rightNum += 1;
				}
				if(vm.answerNum>=10) {
					// vm.$router.push('/result/'+vm.rightNum+'');
					setTimeout(function(){
						vm.$router.replace({
							// path:'/result',
							name:'Result',
							params:{
								correctNum:vm.rightNum
							}
						});
					},300)
				}else {
					setTimeout(function(){
						clearInterval(vm.timer);
						vm.timeDown();
						vm.selType();
						vm.answerNum += 1;
						vm.hasClked = false;
						
					},300);
				}
			},
			comStyle() {
				var w = document.documentElement.clientWidth;
				var h = 1.8*w + 'px';
				this.askWpStyle.height = h;
			},
			cloneObj(o) {
				if(!o) return;
				return JSON.parse(JSON.stringify(o));
			}
		},
		created() {
			let vm = this;
			vm.selType();
			vm.timeDown();
			vm.comStyle();
			// console.log(vm.banPicArr);
			
		},
		beforeRouteLeave(to, from, next) {
			clearInterval(this.timer);
			next();
		}
	}
</script>
<style>
	.ask-wp {
		background: url('../assets/img/answer-bg.png') no-repeat;
		position: absolute;
		width: 100%;
		/*height: 100%;*/
		height: auto;
		top: 0;
		left: 0;
		background-size: 100% 100%;
	}
	.answer-time {
		width: 100px;
		height: 40px;
		border-radius: 3px;
		background-color: #fff;
		font-size: 15px;
		color: #ec6626;
		line-height: 40px;
		text-align: center;
		margin: 47px auto 0;
	}
	.info-img {
		width: 300px;
		height: 100px;
		border-radius: 5px;/*no*/
		margin: 33px auto 0;
		/*background-image: url('../assets/img/test-info.png');
		background-size: 100% 100%;*/
	}

	.info-img img {
		width: 100%;
		height: 100%;
	}

	.ask-wp .ask-title {
		width: 300px;
		font-size: 20px;
		color: #333;
		margin: 28px auto 7px;
	}
	.ask-wp .evy-opt {
		width: 260px;
		min-height: 26px;
		border-radius: 7px;
		border: 1px solid #ccc;/*no*/ 
		margin: 18px auto 0;
		font-size: 18px;
		color: #333;
		/*line-height: 50px;*/
		/*padding-left: 40px;*/
		/*box-sizing: border-box;*/
		line-height: 26px;
		padding: 12px 10px 12px 30px;
	}
	.ask-wp .evy-opt.on {
		background-color: #25a04f;
		color: #fff;
	}
	.ask-wp .evy-opt.err-cls {
		background-color: #e55;
		color: #fff;
	}
</style>